<template>
  <div class="particulars">
    <AppDownload></AppDownload>
    <div class="wrapper" v-for="(item, index) in list" :key="index">
      <div class="wrapper-header">
        <img :src="item.img" alt="" @click="showPreview(index)" />
      </div>
      <div class="activity-info">
        <div class="h1">{{ item.name }}</div>
        <div class="info-0">
          <div class="info-price">¥{{ item.price }}</div>
          <div class="wantToNum">
            <img src="../assets/show_icon_.png" alt="" />
            收藏演出
          </div>
        </div>
        <div class="info-1">
          <div>
            <img src="../assets/1.png" alt="" />
            <span v-for="(ele, i) in item.tagList" :key="i">{{ ele }}</span>
          </div>
          <div>
            <img src="../assets/time.png" alt="" />
            {{ item.time }}
          </div>
          <div>
            <img src="../assets/2.png" alt="" />
            {{ item.diqu }}
          </div>
        </div>

        <div class="info-3">
          <a>客服资讯</a>
          <a
            href="https://map.baidu.com/search/%E5%8C%97%E4%BA%AC%E5%B8%82/@12959220,4825334.5,12z?querytype=s&da_src=shareurl&wd=%E5%8C%97%E4%BA%AC&c=1&src=0&pn=0&sug=0&l=5&b=(7185747.163924148,4124943.4466238813;14328559.61405274,7482437.319666098)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&device_ratio=2"
            class="location"
            target="_blank"
            >场地位置</a
          >
        </div>
      </div>
    </div>

    <div class="bottom-bar">
      <div class="bar-l" @click="back">
        <img src="../assets/back.png" alt="" />
        演出
      </div>
      <div class="bar-r">立即购买</div>
    </div>
  </div>
</template>

<script>
import AppDownload from "./appDownload";
import { ImagePreview } from "vant";
export default {
  name: "Particulars",

  data() {
    return {
      list: [],
      show: false,
      index: 0,
      images: [],
    };
  },

  mounted() {},
  created() {
    this.getdata();
  },
  methods: {
    back() {
      //回退
      this.$router.go(-1);
    },
    getdata() {
      this.list.push(JSON.parse(localStorage.getItem("particulars")));
    },
    showPreview(index) {
      this.show = true;
      this.images.push(this.list[0].img);

      ImagePreview({ images: this.images, startPosition: index });
    },
  },
  components: {
    AppDownload,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
};
</script>

<style lang="less" scoped>
.particulars {
  width: 100%;
  overflow: hidden;
  position: relative;

  .wrapper {
    width: 100%;
    padding-bottom: 55px;
    box-sizing: border-box;
    overflow: hidden;

    .wrapper-header {
      text-align: center;
      padding: 44px 0 22px 0;
      box-sizing: border-box;
      background: -webkit-linear-gradient(
        top,
        rgba(255, 255, 255, 0.8) 20%,
        rgb(255, 255, 255)
      );
      img {
        width: 165px;
        height: 220px;
      }
    }

    .activity-info {
      padding: 0 22px;
      box-sizing: border-box;
      .h1 {
        font-size: 19px;
        font-weight: 400;
        user-select: text;
      }
      .info-0 {
        margin-top: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info-price {
          color: #eb484a;
          font-size: 20px;
        }
        .wantToNum {
          font-size: 13px;
          color: #999;
          img {
            width: 19px;
            height: 14px;
            margin-right: 4px;
            vertical-align: middle;
          }
        }
      }

      .info-1 {
        border-top: 0.5px #ebebeb solid;
        margin-top: 22px;
        color: #999;
        font-size: 13px;
        padding: 11px 0 22px 0;
        div {
          margin-top: 11px;
          font-size: 13px;
          color: #999;
          img {
            width: 17px;
            height: 17px;
            margin-right: 11px;
            vertical-align: middle;
          }
        }
      }

      .info-3 {
        border-top: 0.5px solid #ebebeb;
        padding: 11px 0;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;

        a {
          width: 50%;
          height: 33px;
          line-height: 33px;
          text-align: center;
          display: block;
          color: #999;
          font-size: 15px;
        }
        .location {
          border-left: 0.5px solid #ebebeb;
        }
      }
    }
  }

  .bottom-bar {
    width: 100%;
    height: 54px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .bar-l {
      width: 40%;
      height: 54px;
      line-height: 54px;
      text-align: center;
      font-size: 15px;
      border-top: 1px solid #ebebeb;
      img {
        width: 19px;
        height: 19px;
        vertical-align: middle;
        margin-top: -2px;
      }
    }
    .bar-r {
      width: 60%;
      height: 100%;
      line-height: 54px;
      text-align: center;
      background: #eb484a;
      color: #fff;
      font-size: 17px;
    }
  }
}
</style>